<template>
  <div class="table-ctrl-body">
    <!--按钮组-->
    <div class="Btns-ctrl-body">

      <!--高级搜索-->
      <SearchPublic
        :searchObj="searchObj"
        @searchParams="searchParamsFn"
      ></SearchPublic>

<!--      <div class="search-ctrl f-l" >
        <form style="height: 100%;">
          <input placeholder="根据车牌号" @keyup="defaultLoad($event)" v-model="searchResourceText" class="search-text">
          <button class="search-btn btn btn-info" type="button" @click="searchResource">搜索</button>
        </form>
      </div>-->

      <div class="btns f-r">
        <button type="button" class="btn btn-info" @click="toggleAddModal">新增</button>
        <button type="button" class="btn btn-warning" @click="toggleRevampModal">修改</button>
        <button type="button" class="btn btn-danger" @click="deleteRowFn">删除</button>
        <button type="button" class="btn btn-success" @click="typeListFn">车辆类型</button>
        <button type="button" class="btn btn-info" @click="pushModal">导入</button>
        <!--<button type="button" class="btn btn-info" @click="deleteRowFn">导入</button>-->
        <!--<button type="button" class="btn btn-info" @click="getModal">模板下载</button>-->
      </div>
    </div>
    <!--按钮组闭合-->
    <!--表格组-->
    <div class="table-ctrl">
      <!--表格头-->
      <!--{{treeTableRow}}-->
      <div class="table-header">
        <table class="table-default">
          <thead>
          <tr>
            <th v-for="ths in tableHeader">
              {{ths.value}}
            </th>
          </tr>
          </thead>
        </table>
      </div>
      <!--表格中部-->
      <div class="table-overflowX">
        <table class="table-default">
          <tbody>
          <tr v-for="(trs,index) in tableRow.list" :class="{active: isActive === index}" @click="selectTableRow(trs,index)">
            <td v-for="tds in tableHeader">
              {{ trs[tds.key] }}
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!--表格翻页-->
      <Pages
        v-if="tableRow"
        :showItem="10"
        :pageSize="20"
        :allDataSum="tableRow.total"
        :allpage="(Math.ceil(tableRow.total/20))"
        v-show="tableRow.total !== 0"
        @current-change="tablePageData"
      ></Pages>

    </div>

    <!--新增-->
    <AddVehicle
      :addModalObj="addModalObj"
      @addModalClose="toggleAddModal"
    ></AddVehicle>

    <!--修改-->
    <RevampVehicle
      :RevampModalObj="RevampModalObj"
      :selectRowId="selectRowId"
      @RevampRadioModalClose="toggleRevampModal"
    ></RevampVehicle>

    <!--警车类型管理-->
    <VehicleTypeTableModal
      :TypeListModalObj="TypeListModalObj"
      @typeListClose="typeListCloseFn"
    ></VehicleTypeTableModal>

    <!--导入-->
    <BulkImport
      :bulkImportObj="bulkImportObj"
      @upModalClose="upModalCloseFn"
    ></BulkImport>

  </div>
</template>

<script>
    import Pages from "../../sudoku/atom/pages.vue"
    import AddVehicle from "./AddVehicle"
    import RevampVehicle from "./RevampVehicle"
    import VehicleTypeTableModal from "./VehicleTypeTableModal"
    import BulkImport from "../../publicTemplate/bulkImport/BulkImport"
    import SearchPublic from "../../publicTemplate/search/SearchPublic"
    export default {
        name: "VehicleTable",
        data(){
          return{
            isActive:-1,
            selectRowId:"",
            tableHeader:[
              {"key":"CARCODE","value":"车牌号"},
              {"key":"STATIONID_PARSE","value":"部门"},
              {"key":"CARTYPE_PARSE","value":"车辆类型"},
              {"key":"COMMATTRIBUTE","value":"通用属性"},
              {"key":"LONGITUDE","value":"经度"},
              {"key":"LATITUDE","value":"纬度"},
              {"key":"ISONLINE_PARSE","value":"是否在线"}
            ],
            tableRow:[],
            tableRowParams : {
              "columns":["*"],
              "conditions":[],
              "dataTypeCode":"policefacility",
              "pageIndex":1,
              "pageSize":20,
              "tableName":"T_RES_CAR_INFO",
              "sorters":[
                {
                  "order": "asc",
                  "sortField": "CARCODE"
                }
              ]
            },
            searchResourceText:"", //搜索关键字
            addModalObj:{
              isShow:false
            },
            RevampModalObj:{
              isShow:false
            },
            TypeListModalObj:{
              isShow:false
            },
            bulkImportObj:{
              title:"导入警车信息",
              isShow:false,
              TemplateUrl:"/policeFacility/BSBatch/getTemplate/carInfo",
              upUrl:"/policeFacility/BSBatch/carInfo",
              urlType:"admin"
            },
            searchObj:{
              condition:[
                {"title":"车牌号","key":"CARCODE","value":'','type':'text','data':''},
                {"title":"车辆类型","key":"CARTYPE","value":'','type':'selectCar','data':''},
                {"title":"是否在线","key":"ISONLINE","value":'','type':'select','data':[
                    {'key':'请选择工作状态','value':""},
                    {'key':'在线','value':"1"},
                    {'key':'离线','value':"2"},
                  ]
                },
                {"title":"部门","key":"STATIONID","value":'','type':'treeSection','data':this.ztreeSection}
              ],
              htmlType:"searchDefaultPublic",
            },
          }
        },
        components:{
          Pages,
          AddVehicle,
          RevampVehicle,
          VehicleTypeTableModal,
          BulkImport,
          SearchPublic
        },
        mounted(){
          //初始化加载表格
          this.tableRowAjax();
          //所属部门
          this.$axios.get(this.HOST+'/station/getOrgaInfo')
            .then((data)=>{
              this.searchObj.condition[3].data = data.data.data;
            })
            .catch((err)=>{
              //console.log(err);
            });
            this.getCarTypeList();
        },
        methods:{
          //加载车辆类型列表
          getCarTypeList(){
            let paramsCarType = {
              "columns": ["*"],
              "conditions": [],
              "dataTypeCode": "policefacility", //数据库选择
              "pageIndex": 1, //分页
              "pageSize": -1, //分页条目 -1查所有
              "tableName": "T_CAR_TYPE" //表名称
            };
            //加载车类型列表
            this.$axios.post(this.HOST+"/base/query/page",paramsCarType)
              .then((data)=>{
                //console.log(data);
                //this.tableRow = data.data.data.list;
                this.searchObj.condition[1].data = data.data.data.list;
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //分页切换
          tablePageData(page){
            ////console.log(page);
            this.tableRowParams.pageIndex = page; //分页赋值
            this.tableRowAjax(); //加载表格
            this.clearSelectRow(); //清除表格选项
          },
          //表格加载
          tableRowAjax(){
            this.clearSelectRow();
            this.$axios.post(this.HOST+"/base/query/page",this.tableRowParams)
              .then((data)=>{
                this.tableRow = data.data.data;
                //console.log(data);
                ////console.log(this.tableRow);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //关键字搜索
          searchResource(){
            let searchParams = [ //查询条件
              {
                "field": "CARCODE",
                "symbol": "like",
                "value": ""
              }
            ];
            if( this.searchResourceText ){
              searchParams[0].value = "%"+this.searchResourceText+"%";
              //console.log(searchParams);
            }else{
              searchParams = []
            }
            //搜去条件添加到组件全局
            this.tableRowParams.conditions = searchParams;
            //重新加载
            this.tableRowAjax();
            //清楚选择缓存
            this.clearSelectRow();
          },
          //切换新增弹窗是否显示
          toggleAddModal(){
            this.addModalObj.isShow = !this.addModalObj.isShow;
            if( !this.addModalObj.isShow ){
              this.tableRowAjax();
            }
          },
          toggleRevampModal(){
            if( this.selectRowId !== "" && this.isActive !== -1 ){
              this.RevampModalObj.isShow = !this.RevampModalObj.isShow;
              if( !this.RevampModalObj.isShow ){
                this.tableRowAjax();
              }
            }else{
              this.s_alert("请选择需要修改的警车！")
            }
          },
          typeListFn(){
            this.TypeListModalObj.isShow = !this.TypeListModalObj.isShow;
          },
          typeListCloseFn(){
            this.TypeListModalObj.isShow = !this.TypeListModalObj.isShow;
            if( this.TypeListModalObj.isShow === false ){
              this.getCarTypeList();
              this.tableRowAjax();
            }
          },
          //选择表格当前行
          selectTableRow(obj,index){
            //console.log(obj);
            //console.log(index);
            this.isActive = index;
            this.selectRowId = obj.ID;
          },
          //清除选择
          clearSelectRow(){
            this.isActive = -1;
            this.selectRowId = "";
          },
          //导入用户模板
          pushModal(){
            this.bulkImportObj.isShow = true;
          },
          upModalCloseFn(){
            this.bulkImportObj.isShow = false;
            this.tableRowAjax();
          },
          //默认加载
          defaultLoad(ev){
            if( ev.keyCode === 8 ){
              if( this.searchResourceText === "" ){
                this.searchResource();
              }
            }
          },
          //删除功能
          deleteRowFn(){
            //DELETE /base/remove
            if( this.selectRowId !== "" ){
              let msg = confirm("是否确定删除该警车信息？");
              if( msg ){
                let params ={
                  "conditions": [
                    {
                      "field": "ID",
                      "symbol": "=",
                      "value": this.selectRowId
                    }
                  ],
                  "dataTypeCode": "policefacility",
                  "tableName": "T_RES_CAR_INFO"
                };
                //console.log(params);
                this.$axios.delete(this.HOST+"/base/remove", {
                  data: params
                })
                  .then((data)=>{
                    //console.log(data);
                    if( data.data.success ){
                      this.s_alert("删除成功！");
                      this.s_logwrite("资源信息管理-警车管理","删除警车");
                      //重新加载
                      this.tableRowAjax();
                      //清除选择缓存
                      this.clearSelectRow();
                    }
                  })
                  .catch((err)=>{
                    //console.log(err);
                  })
              }
            }else{
              this.s_alert("请选择需要删除的警车！");
            }
          },
          //搜索
          searchParamsFn(searchParams){
            //console.log(this.searchObj.condition);
            let searchParamsArr = [];
            for( let i=0;i<this.searchObj.condition.length;i++ ){
              if( this.searchObj.condition[i].value && this.searchObj.condition[i].value !=="" ){
                if( this.searchObj.condition[i].key === 'CARTYPE' ){
                  searchParamsArr.push(
                    {"field": this.searchObj.condition[i].key,"symbol":"=","value":this.searchObj.condition[i].value}
                  )
                }else{
                  searchParamsArr.push(
                    {"field": this.searchObj.condition[i].key,"symbol":"like","value":"%"+this.searchObj.condition[i].value+"%"}
                  )
                }

              }
            }
            this.tableRowParams.conditions = searchParamsArr;
            this.tableRowAjax();
          },
          //导出模板
          getModal(){
            window.location.href = this.HOST + "/bs/batch/getTemplate/police";
          }
        }
    }
</script>

<style scoped>

</style>
